<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/elementUI.js"></script>
    <link rel="stylesheet" href="css/elementUI.css">
</head>
<body>
<div id="app">

    日期范围：<el-radio-group v-model="form.timeRange">
        <el-radio-button label="0">全部</el-radio-button>
        <el-radio-button label="1">今日</el-radio-button>
        <el-radio-button label="2">昨日</el-radio-button>
        <el-radio-button label="3">一周内</el-radio-button>
        <el-radio-button label="4">一月内</el-radio-button>
        <el-radio-button label="5">一月前</el-radio-button>
    </el-radio-group>
    <br>
    <br>
    <el-input type="text" v-model="form.title"></el-input>
    <el-button type="primary" @click="toGoods">物资管理页面</el-button>
    <el-table
            :data="tableData">
        <el-table-column
                prop="id"
                label="ID">
        </el-table-column>
        <el-table-column
                prop="title"
                label="标题">
        </el-table-column>
        <el-table-column
                label="申请人">
            <template slot-scope="scope">
                {{scope.row.user.username}}
            </template>
        </el-table-column>
        <el-table-column
                label="物资名称">
            <template slot-scope="scope">
                {{scope.row.goods.name}}
            </template>
        </el-table-column>

        <el-table-column
                label="接收人">
            <template slot-scope="scope">
                {{scope.row.suserName}}
            </template>
        </el-table-column>
        <el-table-column
                label="发放人">
            <template slot-scope="scope">
                {{scope.row.fuserName}}
            </template>
        </el-table-column>
        <el-table-column
                prop="num"
                label="申请数量">
        </el-table-column>
        <el-table-column
                prop="remark"
                label="备注">
        </el-table-column>

        <el-table-column
                label="审批状态">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status==1">申请中</el-tag>
                <el-tag v-else-if="scope.row.status==2" type="success">同意</el-tag>
                <el-tag v-else-if="scope.row.status==3" type="danger">不同意</el-tag>
                <el-tag v-else type="info">已发放</el-tag>
            </template>
        </el-table-column>

        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button v-if="scope.row.status=='2'" type="success" @click="handleFafang(scope.row)">发放</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 4, 6, 8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="发放信息" :visible.sync="dialogFormVisible">
        <el-form :model="pojo">
            标题：{{row.title}} <br>
            物资名称：{{row.goods.name}} <br>
            发放数量：{{row.num}} <br>
            <hr>
            <el-form-item label="接收人" >
                <el-select v-model="pojo.sid" placeholder="请选择接收人" :clearable="true">
                    <el-option v-for="user in userList" :label="user.username" :value="user.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" >
                <el-input v-model="pojo.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateApply">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            tableData:[],
            pageNum:1,
            pageSize:2,
            total:0,
            user:{},
            form:{
                timeRange:"0",
                status:"5"
            },
            dialogFormVisible:false,
            pojo:{},
            userList:[],
            row:{
                goods:{name:""}
            }
        },
        watch:{
            form:{
                deep:true, // 深入，深度
                handler(val){
                    this.findPage();
                }
            }
        },
        methods:{
            toGoods(){
                location.href="goodsHR.html"
            },
            updateApply(){
                this.pojo.status = "4";
                axios.post("/apply/update",this.pojo).then(res=>{
                    this.findPage();
                    this.dialogFormVisible = false;
                })
            },
            findUserList(){
                axios.get("/user/findAll").then(res=>{
                    this.userList = res.data;
                })
            },
            handleFafang(row){
                this.row = row;
                console.log(row);
                this.pojo.id=row.id;
                this.pojo.fid=this.user.id;
                this.dialogFormVisible = true;
            },
            updateStatus(id,status){
                let pojo = {id:id,status:status};
                axios.post("/apply/update",pojo).then(res=>{
                    this.findPage();
                })
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.findPage();
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.findPage();
            },
            findPage(){
                axios.post(`/apply/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.form).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            }
        },
        created(){
            this.user = JSON.parse(localStorage.getItem("user"));
            this.findPage();
            this.findUserList();
        }
    })
</script>
</body>
</html>